<template>
  <div class="page-port">
    <div class="port-list" v-for="(port, index) in portList" :key="port.code">
      <div class="port-item">
        <div class="port-name" @dblclick="onRefresh(index)">{{ port.name }}</div>
        <div class="port-work-list">
          <PageScroll :probeType="index" :itemInfo="port" fromType="port">
            <!-- <ul>
              <WorkItem v-for="(work, index) in port.data" :key="index" :work="work" class="port-work-item">
              </WorkItem>
            </ul> -->
          </PageScroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageScroll from './components/PageScroll';
import WorkItem from './components/WorkItem.vue';
const PAGE_SIZE = 10;
export default {
  components: {
    PageScroll,
    WorkItem,
  },
  data() {
    return {
      portList: [
        {
          name: '青岛港',
          code: 'qingdaogang',
          data: [],
        },
        {
          name: '烟台港',
          code: 'yantaigang',
          data: [],
        },

        {
          name: '日照港',
          code: 'rizhoagang',
          data: [],
        },
        {
          name: '渤海湾港',
          code: 'bohaiwangang',
          data: [],
        },
      ],
    };
  },
  created() { },
  mounted() { },
  methods: {
    onRefresh(index) {
      this.$bus.$emit("onRefresh", index);
    },

  },
};
</script>

<style lang="less" scoped>
.page-port {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  padding: 0 14px;
  overflow: hidden;
  user-select: none;

  .port-list {
    position: relative;
    width: 25%;
    height: 100%;
    padding-left: 16px;
    padding-right: 16px;

    &::after {
      position: absolute;
      content: '';
      height: 100%;
      right: -1px;
      top: 0;
      width: 2px;
      background: url(~@/assets/svg/port-split.svg) no-repeat;
    }

    &:last-of-type::after {
      display: none;
    }

    .port-item {
      height: 100%;
    }

    .port-name {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 60px;
      background: url(~@/assets/svg/port-name-bg.svg) center no-repeat;
      font-size: 24px;
      font-weight: 900;
      color: #ffffff;
      cursor: pointer;
    }

    .port-work-list {
      width: 100%;
      // height: calc(100% - 85px);
      // overflow: hidden;
      margin-top: 24px;
      padding: 0px;
      height: calc(100vh - 196px);
      overflow-y: auto;

      ::v-deep {
        ul {
          padding: 0px;
        }
      }

      &::-webkit-scrollbar {
        display: none;
      }

      .port-work-item+.port-work-item {
        margin-top: 20px;
      }
    }
  }
}
</style>
